<template>
  <div class="like">
    <div class="like-top">
      <img
        src="//m.360buyimg.com/babel/s750x88_jfs/t1/219797/12/4791/3916/61945d80E712c8a02/4bf3043ac8b94ff3.png.webp"
        alt=""
      />
    </div>
    <ul>
      <li
        class="like-item border-bottom"
        v-for="item in likeList"
        :key="item.id"
      >
        <div class="like-img">
          <img :src="item.imgUrl" />
        </div>
        <div class="like-text">
          <div class="like-title">{{ item.title }}</div>
          <div class="like-message">{{ item.msg }}</div>
          <div class="like-map">
            <span class="like-mark"
              >￥<b>{{ item.pre }}</b></span
            >起
            <span class="like-item-map">{{ item.map }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeList: [
        {
          id: '01',
          imgUrl: '//m.360buyimg.com/babel/s326x326_jfs/t1/152402/7/6447/21778/5fb63195Eef09d467/4cf62f47f1c37f2d.jpg',
          title: '金海湖风景区',
          msg: '13144条评论',
          pre: '18.8',
          map: '平谷区'
        }, {
          id: '02',
          imgUrl: '//m.360buyimg.com/babel/s326x326_jfs/t1/189591/7/5349/61079/60b06edaE8ab7f17f/a3b2de7d82bfdde1.jpg',
          title: '金海湖风景区',
          msg: '13144条评论',
          pre: '18.8',
          map: '平谷区'
        }, {
          id: '03',
          imgUrl: '//m.360buyimg.com/babel/s326x326_jfs/t1/171393/17/22163/232700/6178e8feE4ab4dad7/8d75516f94fd66a0.jpg!q70.dpg//m.360buyimg.com/babel/s326x326_jfs/t1/171393/17/22163/232700/6178e8feE4ab4dad7/8d75516f94fd66a0.jpg',
          title: '金海湖风景区',
          msg: '13144条评论',
          pre: '18.8',
          map: '平谷区'
        }, {
          id: '04',
          imgUrl: '//m.360buyimg.com/babel/s326x326_jfs/t1/189700/12/570/319846/608a83ebE407667dd/94960070c713d856.jpg',
          title: '金海湖风景区',
          msg: '13144条评论',
          pre: '18.8',
          map: '平谷区'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.like {
  margin-top: 0.2rem;
  font-size: 0.28rem;
  background: #fff;
  .like-top {
    padding: 0.1rem 0;
    font-size: 0.32rem;
    img {
      width: 100%;
    }
  }
  .like-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    .like-img {
      float: left;
      width: 30%;
      img {
        width: 2rem;
        height: 2rem;
      }
    }
    .like-text {
      float: left;
      width: 67%;
      padding-left: 0.22rem;
      margin-bottom: 0.2rem;
      .like-title {
        font-size: 0.36rem;
        color: #212121;
        margin-top: 0.4rem;
      }
      .like-message {
        margin-top: 0.3rem;
        color: #616161;
        font-size: 0.24rem;
      }
      .like-map {
        position: relative;
        margin-top: 0.3rem;
        color: #616161;
        .like-mark {
          color: #ff8300;
          b {
            font-size: 0.4rem;
          }
        }
        .like-item-map {
          font-size: 0.32rem;
          position: absolute;
          right: 0.2rem;
          top: 0.1rem;
        }
      }
    }
  }
}
</style>
